import React, { Component, createRef, forwardRef } from 'react'


// 函数式组件无法直接使用 ref 属性 如果需要使用 ref 属性我们需要先使用 
// forwardRef 将组件包裹起来，ref 会在组件的函数中获取

// forwardRef: 让函数式组件可以使用 ref 属性
// forwardRef 是一个高阶组件，高阶组件类似于 Vue 中的 mixin
// 高阶组件是 react 中组件内容复用的一种解决方案
// 高阶组件，可以接收一个参数，该参数是一个组件。他会给你返回一个新的组件
const Main = forwardRef((props, ref) => {
    console.log(props, ref);
    return <h1 ref={ref}>Main 组件</h1>
})

export default class App extends Component {

    mainRef = createRef()

    render() {
        return (
            <div>
                <Main ref={this.mainRef} />

                <button onClick={() => {
                    console.log(this.mainRef.current);
                }}>点击获取 ref 值</button>

            </div>
        )
    }
}
